import React from 'react';
import { Document, Page } from 'react-pdf';
import Pager from '../Pager'
import http from '../../../utils/http';
const queryString = require('query-string');

class TeachingContent extends React.Component {
  state = {
    pdfurl: '',
    pagers: {
      count: 1,
      index: 0,
      total: 0,
    },
  }
  onDocumentLoad = ({ numPages }) => {
    const pagers = this.state.pagers
    pagers.total = numPages
    this.setState({ pagers });
  }
  // 翻页
  changePage = (pageNumber) => {
    const pagers = this.state.pagers
    pagers.index = pageNumber
    this.setState({ pagers });
  }
  // 课程urls
  getCourseUrl(){
    // moduleType preview:预习 ordinary:正课  review:复习
    const search = queryString.parse(this.props.location.search)
    const lessonId = search.lessonid
    http
      .get('/course/lesson/affix', {
        params: {
          lessonId,
          moduleType: 'ordinary'
        }
      })
      .then(data=>{
        let url = data[0] && data[0].affixDatas && data[0].affixDatas[0] && data[0].affixDatas[0].url
        if (url) {
          url = `//${url}`
          if (/.pdf$/.test(url)) {
            this.setState({
              pdfurl: url
            })
          } else {
            window.location.href = url
          }
        }
      },err=>{
    })
  }
  componentWillMount() {
    this.getCourseUrl()
  }
  render() {
    return (
      <div className="col-md-12" style={{margin:"0 42px"}}>
        {this.state.pdfurl?
        <div>
          <Document
            file={this.state.pdfurl}
            onLoadSuccess={this.onDocumentLoad}
          >
            <Page pageNumber={this.state.pagers.index+1} />
          </Document>
          <Pager pagers={this.state.pagers} changePage={this.changePage}></Pager>
          {/* <iframe title="iframe" style={{width:'100%',height:'900px'}} src={"http://wuhao-file001.oss-cn-huhehaote.aliyuncs.com/office_web/1.pdf"}></iframe> */}
          {/* <iframe title="iframe" style={{width:'100%',height:'900px'}} src={"http://wuhao-file001.oss-cn-huhehaote.aliyuncs.com/office_web/2.pptx"}></iframe> */}
        </div>
        :
        <div style={{textAlign:'center',marginTop: '20%'}}>暂无教学内容</div>
        }
      </div>
    )
  }
}
export default TeachingContent; 